<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010913-刘文奇</title>
    <link rel="stylesheet" href="liuwenqi6.css">
</head>
<body>
    <div class="liu-container">
        <div class="header">
            <h2>全国</h2>
            <button>取消</button>
        </div>
        <div class="search-bar">
            <input type="text" placeholder="输入关键词搜索">
            <button>搜索</button>
        </div>

        <div class="liu-section">
            <h3>搜索历史</h3>
            <div class="history">
                <div class="item">远程 Java</div>
                <div class="item">远程</div>
            </div>
        </div>
        <div class="liu-section">
            <h3>猜你要搜</h3>
            <div class="suggestions">
                <div class="item">2025最新寒假实习</div>
                <div class="item">求职新风口 ESG</div>
                <div class="item">2天入门 AI 绘画</div>
                <div class="item">商科寒假实习攻略</div>
                <div class="item">查看校友就业动向</div>
                <div class="item">霸王茶姬 25校招</div>
            </div>
        </div>
    </div>
</body>
<script>
    // 获取DOM元素
    const searchButton = document.querySelector(".search-bar button"); // 搜索按钮
    const cancelButton = document.querySelector(".header button"); // 取消按钮
    const searchInput = document.querySelector(".search-bar input"); // 搜索输入框
    const historyContainer = document.querySelector(".history"); // 搜索历史容器
    const suggestionsContainer = document.querySelector(".suggestions"); // 猜你要搜容器

    // 模拟搜索历史数据
    const searchHistory = ["远程 Java", "远程"];

    // 初始化搜索历史
    function loadSearchHistory() {
        // 清空历史记录
        historyContainer.innerHTML = '';

        searchHistory.forEach(item => {
            const historyItem = document.createElement("div");
            historyItem.classList.add("item");
            historyItem.textContent = item;

            // 给每个历史项绑定点击事件，点击后填充搜索框
            historyItem.addEventListener("click", function () {
                searchInput.value = item;
            });

            historyContainer.appendChild(historyItem);
        });
    }

    // 搜索按钮点击事件
    searchButton.addEventListener("click", function () {
        const query = searchInput.value.trim();

        if (query) {
            // 执行搜索操作（这里只是弹窗展示，可以替换为实际的搜索逻辑）
            alert("搜索内容：" + query);

            // 添加到搜索历史
            if (!searchHistory.includes(query)) {
                searchHistory.unshift(query); // 把新搜索的内容放到数组最前面
                if (searchHistory.length > 5) {
                    searchHistory.pop(); // 保持最多5个搜索历史
                }
            }

            // 更新搜索历史展示
            loadSearchHistory();
        } else {
            alert("请输入搜索关键词！");
        }
    });

    // 取消按钮点击事件
    cancelButton.addEventListener("click", function () {
        searchInput.value = ''; // 清空搜索框
    });

    // 初始化页面
    loadSearchHistory();

    // 这里是“猜你要搜”功能的模拟展示
    const suggestions = [
        "2025最新寒假实习",
        "求职新风口 ESG",
        "2天入门 AI 绘画",
        "商科寒假实习攻略",
        "查看校友就业动向",
        "霸王茶姬 25校招"
    ];

    suggestions.forEach(suggestion => {
        const suggestionItem = document.createElement("div");
        suggestionItem.classList.add("item");
        suggestionItem.textContent = suggestion;

        // 给每个推荐项绑定点击事件
        suggestionItem.addEventListener("click", function () {
            searchInput.value = suggestion;
        });

        suggestionsContainer.appendChild(suggestionItem);
    });
</script>

</html>
